

<!DOCTYPE html>
<html lang="zh-CN" data-default-color-scheme=auto>



<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="/img/fluid.png">
  <link rel="icon" href="/img/fluid.png">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
  <meta name="theme-color" content="#2f4154">
  <meta name="author" content="xzk">
  <meta name="keywords" content="">
  
    <meta name="description" content="哈基小米德の个人博客">
<meta property="og:type" content="website">
<meta property="og:title" content="哈基小米德">
<meta property="og:url" content="http://example.com/index.html">
<meta property="og:site_name" content="哈基小米德">
<meta property="og:description" content="哈基小米德の个人博客">
<meta property="og:locale" content="zh_CN">
<meta property="article:author" content="xzk">
<meta name="twitter:card" content="summary_large_image">
  
  
  
  <title>哈基小米德</title>

  <link  rel="stylesheet" href="https://lib.baomitu.com/twitter-bootstrap/4.6.1/css/bootstrap.min.css" />





<!-- 主题依赖的图标库，不要自行修改 -->
<!-- Do not modify the link that theme dependent icons -->

<link rel="stylesheet" href="//at.alicdn.com/t/font_1749284_hj8rtnfg7um.css">



<link rel="stylesheet" href="//at.alicdn.com/t/font_1736178_lbnruvf0jn.css">


<link  rel="stylesheet" href="/css/main.css" />


  <link id="highlight-css" rel="stylesheet" href="/css/highlight.css" />
  
    <link id="highlight-css-dark" rel="stylesheet" href="/css/highlight-dark.css" />
  




  <script id="fluid-configs">
    var Fluid = window.Fluid || {};
    Fluid.ctx = Object.assign({}, Fluid.ctx)
    var CONFIG = {"hostname":"example.com","root":"/","version":"1.9.7","typing":{"enable":true,"typeSpeed":70,"cursorChar":"_","loop":false,"scope":[]},"anchorjs":{"enable":true,"element":"h1,h2,h3,h4,h5,h6","placement":"left","visible":"hover","icon":""},"progressbar":{"enable":true,"height_px":3,"color":"#29d","options":{"showSpinner":false,"trickleSpeed":100}},"code_language":{"enable":true,"default":"TEXT"},"copy_btn":true,"image_caption":{"enable":true},"image_zoom":{"enable":true,"img_url_replace":["",""]},"toc":{"enable":true,"placement":"right","headingSelector":"h1,h2,h3,h4,h5,h6","collapseDepth":0},"lazyload":{"enable":true,"loading_img":"/img/loading.gif","onlypost":false,"offset_factor":2},"web_analytics":{"enable":false,"follow_dnt":true,"baidu":null,"google":{"measurement_id":null},"tencent":{"sid":null,"cid":null},"woyaola":null,"cnzz":null,"leancloud":{"app_id":null,"app_key":null,"server_url":null,"path":"window.location.pathname","ignore_local":false}},"search_path":"/local-search.xml","include_content_in_search":true};

    if (CONFIG.web_analytics.follow_dnt) {
      var dntVal = navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack;
      Fluid.ctx.dnt = dntVal && (dntVal.startsWith('1') || dntVal.startsWith('yes') || dntVal.startsWith('on'));
    }
  </script>
  <script  src="/js/utils.js" ></script>
  <script  src="/js/color-schema.js" ></script>
  


  
<meta name="generator" content="Hexo 7.3.0"></head>


<body>
  

  <header>
    

<div class="header-inner" style="height: 100vh;">
  <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand" href="/">
      <strong>哈基小米德</strong>
    </a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/" target="_self">
                <i class="iconfont icon-home-fill"></i>
                <span>首页</span>
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/archives/" target="_self">
                <i class="iconfont icon-archive-fill"></i>
                <span>归档</span>
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/categories/" target="_self">
                <i class="iconfont icon-category-fill"></i>
                <span>分类</span>
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/tags/" target="_self">
                <i class="iconfont icon-tags-fill"></i>
                <span>标签</span>
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/about/" target="_self">
                <i class="iconfont icon-user-fill"></i>
                <span>关于</span>
              </a>
            </li>
          
        
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" target="_self" href="javascript:;" data-toggle="modal" data-target="#modalSearch" aria-label="Search">
              <i class="iconfont icon-search"></i>
            </a>
          </li>
          
        
        
          <li class="nav-item" id="color-toggle-btn">
            <a class="nav-link" target="_self" href="javascript:;" aria-label="Color Toggle">
              <i class="iconfont icon-dark" id="color-toggle-icon"></i>
            </a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

  

<div id="banner" class="banner" parallax=true
     style="background: url('/img/default.png') no-repeat center center; background-size: cover;">
  <div class="full-bg-img">
    <div class="mask flex-center" style="background-color: rgba(0, 0, 0, 0.3)">
      <div class="banner-text text-center fade-in-up">
        <div class="h2">
          
            <span id="subtitle" data-typed-text="哈基小米德 の 个人博客"></span>
          
        </div>

        
      </div>

      
        <div class="scroll-down-bar">
          <i class="iconfont icon-arrowdown"></i>
        </div>
      
    </div>
  </div>
</div>

</div>

  </header>

  <main>
    
      <div class="container nopadding-x-md">
        <div id="board"
          style="margin-top: 0">
          
          <div class="container">
            <div class="row">
              <div class="col-12 col-md-10 m-auto">
                


  <div class="row mx-auto index-card">
    
    
    <article class="col-12 col-md-12 mx-auto index-info">
      <h2 class="index-header">
        
        <a href="/2024/10/26/hello-world/" target="_self">
          Hello World
        </a>
      </h2>

      
      <a class="index-excerpt index-excerpt__noimg" href="/2024/10/26/hello-world/" target="_self">
        <div>
          Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub. Quick
        </div>
      </a>

      <div class="index-btm post-metas">
        
          <div class="post-meta mr-3">
            <i class="iconfont icon-date"></i>
            <time datetime="2024-10-26 10:24" pubdate>
              2024-10-26
            </time>
          </div>
        
        
        
      </div>
    </article>
  </div>

  <div class="row mx-auto index-card">
    
    
    <article class="col-12 col-md-12 mx-auto index-info">
      <h2 class="index-header">
        
        <a href="/2024/10/25/vue2-vue3/" target="_self">
          vu2和vue3的区别
        </a>
      </h2>

      
      <a class="index-excerpt index-excerpt__noimg" href="/2024/10/25/vue2-vue3/" target="_self">
        <div>
          一、vue2和vue3双向数据绑定原理的区别？vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert()对数据进行劫持 结合 发布订阅模式的方式来实现的vue3发生了改变，使用proxy替换Object.defineProerty,使用Proxy的优势： 可直接监听数组类型的数据变化性能的提升监听的目标为对象本身，不需要像Object.definePrope
        </div>
      </a>

      <div class="index-btm post-metas">
        
          <div class="post-meta mr-3">
            <i class="iconfont icon-date"></i>
            <time datetime="2024-10-25 22:37" pubdate>
              2024-10-25
            </time>
          </div>
        
        
        
      </div>
    </article>
  </div>

  <div class="row mx-auto index-card">
    
    
    <article class="col-12 col-md-12 mx-auto index-info">
      <h2 class="index-header">
        
        <a href="/2024/10/25/django-crontab/" target="_self">
          Django项目使用定时任务
        </a>
      </h2>

      
      <a class="index-excerpt index-excerpt__noimg" href="/2024/10/25/django-crontab/" target="_self">
        <div>
          Django项目使用定时任务Django实现定时任务的方法有很多种，如果是简单的场景，固定时间进行定时任务，不需要动态的进行配置定时时间，使用django的django-crontab可以很好的实现。django-crontab是利用django的配置去生成一个操作系统层的crontab定时任务。可以与django的项目进行结合，调用函数模型等会更便捷。定时任务一旦开启，则会在操作系统后台一直运行
        </div>
      </a>

      <div class="index-btm post-metas">
        
          <div class="post-meta mr-3">
            <i class="iconfont icon-date"></i>
            <time datetime="2024-10-25 22:37" pubdate>
              2024-10-25
            </time>
          </div>
        
        
        
      </div>
    </article>
  </div>

  <div class="row mx-auto index-card">
    
    
    <article class="col-12 col-md-12 mx-auto index-info">
      <h2 class="index-header">
        
        <a href="/2024/04/23/shujujpgiegou/" target="_self">
          常用数据结构
        </a>
      </h2>

      
      <a class="index-excerpt index-excerpt__noimg" href="/2024/04/23/shujujpgiegou/" target="_self">
        <div>
          常用数据结构及Python实现数据结构是计算机科学中组织和存储数据的方式，合理选择和使用数据结构对于解决各种编程问题至关重要。本文将介绍一些常用的数据结构及其在Python中的实现，包括列表（数组）、栈、队列、链表、二叉树等。 一、列表（数组）（一）概念列表是一种有序的集合，可以存储多个元素，元素可以是不同的数据类型。在Python中，列表是内置的数据类型，使用方括号[]表示。 （二）基本操作 创
        </div>
      </a>

      <div class="index-btm post-metas">
        
          <div class="post-meta mr-3">
            <i class="iconfont icon-date"></i>
            <time datetime="2024-04-23 12:47" pubdate>
              2024-04-23
            </time>
          </div>
        
        
        
          <div class="post-meta">
            <i class="iconfont icon-tags"></i>
            
              <a href="/tags/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/">#数据结构</a>
            
          </div>
        
      </div>
    </article>
  </div>

  <div class="row mx-auto index-card">
    
    
    <article class="col-12 col-md-12 mx-auto index-info">
      <h2 class="index-header">
        
        <a href="/2023/10/25/vue2-base/" target="_self">
          Vue基础语法
        </a>
      </h2>

      
      <a class="index-excerpt index-excerpt__noimg" href="/2023/10/25/vue2-base/" target="_self">
        <div>
          Vue基础语法Vue是一个流行的JavaScript框架，用于构建用户界面。以下是Vue的一些基础知识和语法。 一、引入Vue1. 通过CDN引入1&lt;script src=&quot;https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js&quot;&gt;&lt;/script&gt; 2. 本地引入如果已经下载了Vue.js文件，可以使用相
        </div>
      </a>

      <div class="index-btm post-metas">
        
          <div class="post-meta mr-3">
            <i class="iconfont icon-date"></i>
            <time datetime="2023-10-25 22:37" pubdate>
              2023-10-25
            </time>
          </div>
        
        
        
      </div>
    </article>
  </div>

  <div class="row mx-auto index-card">
    
    
    <article class="col-12 col-md-12 mx-auto index-info">
      <h2 class="index-header">
        
        <a href="/2023/10/25/definproperty/" target="_self">
          数据代理
        </a>
      </h2>

      
      <a class="index-excerpt index-excerpt__noimg" href="/2023/10/25/definproperty/" target="_self">
        <div>
          使用 JavaScript 的 Object.defineProperty() 实现简单数据代理的方法：同时这也是vue数据代理的底层原理 123456789101112131415161718192021222324252627282930313233let data = &#123;    name: &#x27;张三&#x27;,    age: 25&#125;;let proxyData
        </div>
      </a>

      <div class="index-btm post-metas">
        
          <div class="post-meta mr-3">
            <i class="iconfont icon-date"></i>
            <time datetime="2023-10-25 22:37" pubdate>
              2023-10-25
            </time>
          </div>
        
        
        
          <div class="post-meta">
            <i class="iconfont icon-tags"></i>
            
              <a href="/tags/JavaScript/">#JavaScript</a>
            
          </div>
        
      </div>
    </article>
  </div>

  <div class="row mx-auto index-card">
    
    
    <article class="col-12 col-md-12 mx-auto index-info">
      <h2 class="index-header">
        
        <a href="/2023/09/05/1/" target="_self">
          Vue 中的常用事件修饰符
        </a>
      </h2>

      
      <a class="index-excerpt index-excerpt__noimg" href="/2023/09/05/1/" target="_self">
        <div>
          Vue 中的常用事件修饰符在 Vue 中，事件修饰符用于对事件进行进一步的控制和处理。它们提供了一种简洁的方式来处理常见的事件需求，增强了用户交互的灵活性和可控性。以下是一些 Vue 中常用的事件修饰符： 1. .stop阻止事件冒泡。当一个元素上触发了一个事件，该事件会向上冒泡到父元素，直到到达文档的根节点。使用 .stop 修饰符可以阻止事件继续向上冒泡。 123&lt;div @click=
        </div>
      </a>

      <div class="index-btm post-metas">
        
          <div class="post-meta mr-3">
            <i class="iconfont icon-date"></i>
            <time datetime="2023-09-05 10:37" pubdate>
              2023-09-05
            </time>
          </div>
        
        
        
          <div class="post-meta">
            <i class="iconfont icon-tags"></i>
            
              <a href="/tags/vue/">#vue</a>
            
          </div>
        
      </div>
    </article>
  </div>

  <div class="row mx-auto index-card">
    
    
    <article class="col-12 col-md-12 mx-auto index-info">
      <h2 class="index-header">
        
        <a href="/2023/07/05/MySQL-master/" target="_self">
          利用Docker容器化部署主从同步
        </a>
      </h2>

      
      <a class="index-excerpt index-excerpt__noimg" href="/2023/07/05/MySQL-master/" target="_self">
        <div>
          利用Docker容器化部署主从同步在现代软件开发和部署中，容器化技术已成为一种流行的方式来简化应用程序的部署和管理。Docker作为最常用的容器化平台之一，提供了高效、可移植和可扩展的解决方案。本文将介绍如何使用Docker容器化部署主从同步，包括MySQL数据库的主从配置。 一、准备工作（一）安装Docker 不同操作系统的安装方法有所不同。在Ubuntu系统中，可以使用以下命令安装Docker
        </div>
      </a>

      <div class="index-btm post-metas">
        
          <div class="post-meta mr-3">
            <i class="iconfont icon-date"></i>
            <time datetime="2023-07-05 22:37" pubdate>
              2023-07-05
            </time>
          </div>
        
        
        
      </div>
    </article>
  </div>

  <div class="row mx-auto index-card">
    
    
    <article class="col-12 col-md-12 mx-auto index-info">
      <h2 class="index-header">
        
        <a href="/2023/02/05/4/" target="_self">
          插槽（Slots）详解
        </a>
      </h2>

      
      <a class="index-excerpt index-excerpt__noimg" href="/2023/02/05/4/" target="_self">
        <div>
          Vue 2 插槽（Slots）详解一、什么是插槽？在 Vue 2 中，插槽是一种让父组件向子组件传递内容的方式。它允许你在使用子组件时，在子组件的标记中插入自定义的内容，这些内容可以在子组件的模板中特定的位置进行显示。 二、插槽的类型1. 匿名插槽（默认插槽） 当子组件中只有一个未命名的插槽时，父组件传递的内容会自动填充到这个插槽中。 示例： 子组件：12345&lt;template&gt;
        </div>
      </a>

      <div class="index-btm post-metas">
        
          <div class="post-meta mr-3">
            <i class="iconfont icon-date"></i>
            <time datetime="2023-02-05 10:30" pubdate>
              2023-02-05
            </time>
          </div>
        
        
        
          <div class="post-meta">
            <i class="iconfont icon-tags"></i>
            
              <a href="/tags/vue/">#vue</a>
            
          </div>
        
      </div>
    </article>
  </div>

  <div class="row mx-auto index-card">
    
    
    <article class="col-12 col-md-12 mx-auto index-info">
      <h2 class="index-header">
        
        <a href="/2022/11/06/2/" target="_self">
          JavaScript 箭头函数详解
        </a>
      </h2>

      
      <a class="index-excerpt index-excerpt__noimg" href="/2022/11/06/2/" target="_self">
        <div>
          JavaScript 箭头函数详解在 JavaScript 中，箭头函数是一种简洁的函数表达式语法。它提供了一种更简洁的方式来定义函数，并且在某些情况下具有特殊的行为和用途。 一、基本语法箭头函数的基本语法是：(参数) =&gt; &#123; 函数体 &#125;。如果函数体只有一条表达式，可以省略花括号和 return 关键字。 1234567// 传统函数function add(a, b)
        </div>
      </a>

      <div class="index-btm post-metas">
        
          <div class="post-meta mr-3">
            <i class="iconfont icon-date"></i>
            <time datetime="2022-11-06 10:30" pubdate>
              2022-11-06
            </time>
          </div>
        
        
        
          <div class="post-meta">
            <i class="iconfont icon-tags"></i>
            
              <a href="/tags/JavaScript/">#JavaScript</a>
            
          </div>
        
      </div>
    </article>
  </div>



  <nav aria-label="navigation">
    <span class="pagination" id="pagination">
      <span class="page-number current">1</span><a class="page-number" href="/page/2/#board">2</a><a class="extend next" rel="next" href="/page/2/#board"><i class="iconfont icon-arrowright"></i></a>
    </span>
  </nav>



              </div>
            </div>
          </div>
        </div>
      </div>
    

    
      <a id="scroll-top-button" aria-label="TOP" href="#" role="button">
        <i class="iconfont icon-arrowup" aria-hidden="true"></i>
      </a>
    

    
      <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v" for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>

    

    
  </main>

  <footer>
    <div class="footer-inner">
  
    <div class="footer-content">
       <a href="https://hexo.io" target="_blank" rel="nofollow noopener"><span>Hexo</span></a> <i class="iconfont icon-love"></i> <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener"><span>Fluid</span></a> 
    </div>
  
  
  
  
</div>

  </footer>

  <!-- Scripts -->
  
  <script  src="https://lib.baomitu.com/nprogress/0.2.0/nprogress.min.js" ></script>
  <link  rel="stylesheet" href="https://lib.baomitu.com/nprogress/0.2.0/nprogress.min.css" />

  <script>
    NProgress.configure({"showSpinner":false,"trickleSpeed":100})
    NProgress.start()
    window.addEventListener('load', function() {
      NProgress.done();
    })
  </script>


<script  src="https://lib.baomitu.com/jquery/3.6.4/jquery.min.js" ></script>
<script  src="https://lib.baomitu.com/twitter-bootstrap/4.6.1/js/bootstrap.min.js" ></script>
<script  src="/js/events.js" ></script>
<script  src="/js/plugins.js" ></script>


  <script  src="https://lib.baomitu.com/typed.js/2.0.12/typed.min.js" ></script>
  <script>
    (function (window, document) {
      var typing = Fluid.plugins.typing;
      var subtitle = document.getElementById('subtitle');
      if (!subtitle || !typing) {
        return;
      }
      var text = subtitle.getAttribute('data-typed-text');
      
        typing(text);
      
    })(window, document);
  </script>




  
    <script  src="/js/img-lazyload.js" ></script>
  




  <script  src="/js/local-search.js" ></script>





<!-- 主题的启动项，将它保持在最底部 -->
<!-- the boot of the theme, keep it at the bottom -->
<script  src="/js/boot.js" ></script>


  

  <noscript>
    <div class="noscript-warning">博客在允许 JavaScript 运行的环境下浏览效果更佳</div>
  </noscript>
<script type="text/javascript" src="/js/love.js"></script>
</body>
</html>

